<template>
	<view class="containers">
		<view class="show" v-if="show">
			<view class="bomBox">
				<view class="uni-textarea">
					<textarea placeholder="请填写您的注销原因不少于10个字" placeholder-style="color:#C6C6C6;font-size:17px;padding:16px" @input="conInput"
					 v-model="content" auto-height maxlength="200" />
					</view>
				<view class='text_right'>
	                 <view class="em" style='color:#C6C6C6'>{{tatVal}}/240</view>
	            </view>
			</view>
			<view  class="btn_sub sub" v-show="content.length!=0" @tap="sub"> 提交</view>
			<view  class="btn_sub_dis sub" v-show="content.length===0"> 提交</view>
		</view>
		<view class="" v-else>
			<view class="container" style="background-color: #FFFFFF;height: 220px;">
				<image src="../../static/img/setting/csuccess.png" mode=""></image>
				<view class="success">
					提交成功
				</view>
				<view class="thanks">
					客服人员正在处理中，将通过电话联系答复您结 果，请耐心等待
				</view>
			</view>
			<view class="btn" @tap="toIndex"> 返回首页</view>
		</view>
	</view>
</template>
	
<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
	import { feedback } from '../../api/user';
	export default {
		 data(){
			return{
				btnData:[
					// {
					// 	index:0,
					// 	label:'信息分类',
					// 	isChoose:false
					// },
					{
						index:1,
						label:'功能异常',
						isChoose:false
					},
					{
						index:2,
						label:'产品建议',
						isChoose:false
					},
					{
						index:3,
						label:'其他问题',
						isChoose:false
					},
				],
				content:'',
				tatVal: 0,
				feedback_type:'',
				show:true,
			}
		},
		methods:{
			//选择反馈类型
			choose(index){
				this.btnData.forEach(res=>{
					if(index === res.index){
						res.isChoose = true
						this.feedback_type = res.label
					}else{
						res.isChoose = false
					}
				})
			},
			//限制反馈信息长度为200
			conInput(e){
                this.tatVal = e.detail.value.length;
                if(this.tatVal == 200){
                    uni.showToast({
                        icon: 'none',
                        title: '最多只能输入200字'
                    });
                }
            },
			toIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			//提交反馈信息
			sub(){
				this.show = false
			}
		}
	}
</script>

<style>
	.containers{
		padding-top: 12px;
	}
	.topBox{
		height: 100px;
		overflow: hidden;
		background-color: #FFFFFF;
		padding-bottom: 12px;
	}
	.c_title{
	    height:22px;
	    font-size:16px;
	    font-family:PingFangSC-Medium,PingFang SC;
	    font-weight:500;
	    color:rgba(68,68,68,1);
	    line-height:22px;
	    display: inline-flex;
	    margin-top: 20px;
	}
	.title_icon{
	    width: 20px;
	    height: 20px;
	    margin: 1px 10px 0 0;
	}
	.m_left_16{
	    margin-left: 16px !important;
	}
	.btnBox{
		margin-top: 11px;
	}
	.bomBox{
		background-color: #FFFFFF;
		height: 164px;
		position: relative;
	}
	.active{
		background: #0AC770;
		color:#FFFFFF ;
	}
	.line{
		padding-left: 16px;
	    width:100%;
	    height:1px;
	    background-color: #F1F1F1;
	    margin: 10px 0 0 12px;
	}
	uni-textarea{
		height: 218px !important;
	}
	textarea{
		height: 218px;
		width: 100%;
	}
	.text_right{
		width: 50px;
		position:absolute;
		right: 14px;
		bottom:12px ;
	}
	.sub{
		font-size:18px;
		text-align: center;
		line-height:48px;
		width:343px;
		height:48px;
		margin: 0 auto;
		color: #FFFFFF;
	}
	.btn_sub{
		margin-top: 56px;
		background: #0AC770;
		border-radius: 6px;
	}
	.btn_sub_dis{
		margin-top: 56px;
		background:rgba(198,198,198,1);
		border-radius: 6px;
	}
	.container{
		padding-top: 35px;
	}
	image{
		width: 65px;
		height: 65px;
		margin: 0 auto;
		display: block;
	}
	.success{
		width: 100%;
		text-align: center;
		font-size:18px;
		font-family:PingFang SC;
		font-weight:400;
		line-height:25px;
		color:rgba(51,51,51,1);
		margin-top: 20px;
	}
	.thanks{
		width:351px;
		margin:0 auto;
		text-align: center;
		height:25px;
		font-size:13px;
		font-family:PingFang SC;
		font-weight:400;
		line-height:25px;
		color:rgba(153,153,153,1);
		padding-top: 12px;
	}
	.btn{
		width: 343px;
		height: 48px;
		margin: 0 auto;
		border-radius:6px;
		color: #FFFFFF;
		margin-top: 56px;
		font-size:18px;
		text-align: center;
		line-height: 48px;
		background: #0AC770;
	}
	uni-button:after{
		border:0;
	}
</style>
